<template>
<el-card class="box-card">
    <!--查询-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="title2" placeholder="姓名" size="small"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query()" size="small">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset()" size="small">重置</el-button>
        </el-form-item>
    </el-form>
    <!--表格-->
    <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中" :border="true" size="small" style="width: 100%; margin: 0px 0px 20px 0px">
        <el-table-column label="ID" prop="id" width="80"></el-table-column>
        <el-table-column label="订单号" prop="order_code" width="200"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="身份证" prop="id_number" width="200"></el-table-column>
        <el-table-column label="客户类型" prop="member_type"></el-table-column>
        <el-table-column label="会员手机号" prop="phone" width="120">
            <template slot-scope="scope">
                <span v-if="scope.row.phone!=null">{{scope.row.phone}}</span>
                <span v-else>无</span>
            </template>
        </el-table-column>
        <el-table-column label="房间号" prop="room_number"></el-table-column>
        <el-table-column label="房型" prop="room_name"></el-table-column>
        <el-table-column label="房价" prop="money"></el-table-column>
        <el-table-column label="押金" prop="cash_pledge"></el-table-column>
        <el-table-column label="总金额" prop="actual_amount"></el-table-column>
        <el-table-column label="预定时间" prop="reserve_time" width="200">
            <template slot-scope="scope">
                {{ scope.row.reserve_time | time }}
            </template>
        </el-table-column>
        <el-table-column label="入住时间" prop="creation_time" width="200">
            <template slot-scope="scope">
                {{ scope.row.creation_time | time }}
            </template>
        </el-table-column>
        <el-table-column label="退房时间" prop="end_time" width="200">
            <template slot-scope="scope">
                {{ scope.row.end_time | time }}
            </template>
        </el-table-column>
        <el-table-column label="状态" fixed="right">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.end_time!=null" type="success">已完成</el-tag>
                <el-tag v-else type="danger">进行中</el-tag>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</el-card>
</template>

<script>
import {
    reservation_order
} from "@/api/order";
export default {
    name: "members",

    data() {
        return {
            title2: "",
            currentPage: 1,
            total: 1,
            page: 1,
            limit: 10,
            dialogVisible: false,
            loading: true,
            title: "添加会员",
            // 表格
            tableData: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        reset() {
            this.title2 = "";
            this.getList();
        },
        change() {
            this.$forceUpdate();
        },
        //分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val;
            this.getList();
        },
        //表格数据请求
        async getList() {
            this.loading = true;
            var data = await reservation_order({
                page: this.page,
                limit: this.limit,
                name: this.title2,
            });
            console.log(data);
            if (data.code == 20000) {
                this.loading = false;
                // console.log(data);
                this.tableData = data.data;
                this.total = data.total;
            }
        },
        query() {
            this.getList();
        },
    },
};
</script>

<style scoped>
.box-card {
    margin: 20px;
}
</style>
